<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 700px;

        }

        .admin_info{
            margin: 0 15px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #5c979f">
            <h1 style="color: white;font-size: 22px; text-align: center">
                LuckyHotel后台管理系统
                <span v-if="user.nickname!=null"
                      style="float: right;font-size: 15px">欢迎{{user.nickname}}回来
                    <a href="javascript:void (0)" @click="logout()">退出登录</a>
                </span>
            </h1>
        </el-header>

        <el-container>
            <el-aside width="200px">
                <el-menu style="height: 1500px"
                         @select="handleSelect"
                         default-active="2"
                         class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-promotion"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item index="1-1">个人信息</el-menu-item>
                        <el-menu-item index="1-2">账号信息</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-custom"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="2-1">用户列表</el-menu-item>
                        <el-menu-item index="2-2">管理员列表</el-menu-item>
                        <el-menu-item index="2-3">员工列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>房间管理</span>
                        </template>
                        <el-menu-item index="3-1">房间列表</el-menu-item>
                        <el-menu-item index="3-2">添加房间</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>房间订单管理</span>
                        </template>
                        <el-menu-item index="4-1">房间预定列表</el-menu-item>
                        <el-menu-item index="4-2">订单列表</el-menu-item>
                        <el-menu-item index="4-3">退房记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>留言板管理</span>
                        </template>
                        <el-menu-item index="5-1">留言板</el-menu-item>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-date"></i>
                            <span>酒店信息管理</span>
                        </template>
                        <el-menu-item index="7-1">酒店信息</el-menu-item>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="6-1">商品列表</el-menu-item>
                        <el-menu-item index="6-2">添加商品</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <el-card v-if="currentIndex=='1-1'" class="box-card" style="width: 600px; height: 700px; margin: 0 auto;">
                    <div slot="header" class="clearfix" style="font-size:22px; text-align: center">
                        <span >个人信息</span>
                        <el-button style="float: right; padding: 6px 0" type="text">修改个人信息</el-button>
                    </div>
                    <div class="text item" style="font-size: 18px; margin: 10px 80px;">
                        <p>姓名:
                            <span class="admin_info">{{adminInfo.name}}</span>
                        </p>
                        <p>年龄:
                            <span class="admin_info">{{adminInfo.age}}</span>
                        </p>
                        <p>工作:
                            <span class="admin_info">{{adminInfo.job}}</span>
                        </p>
                    </div>
                </el-card>
                <el-card v-if="currentIndex=='1-2'" class="box-card" style="width: 600px; height: 700px; margin: 0 auto;">
                    <div slot="header" class="clearfix" style="font-size:22px; text-align: center">
                        <span >账号信息</span>
                        <el-button style="float: right; padding: 6px 0" type="text">修改账号信息</el-button>
                    </div>
                    <div class="text item" style="font-size: 18px; margin: 10px 80px;">
                        <p>用户名:
                            <span class="admin_info">{{adminInfo.adminName}}</span>
                        </p>
                        <p>密码:
                            <span class="admin_info">{{adminInfo.password}}</span>
                        </p>

                    </div>
                </el-card>
                <el-table v-if="currentIndex=='2-1'"
                          :data="userArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="username" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                    <el-table-column prop="idCard" label="身份证号" width="300"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='2-2'"
                          :data="adminArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="username" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="phone" label="账号名" width="100"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                    <el-table-column prop="idCard" label="电话" width="150"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='2-3'"
                          :data="empArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                    <el-table-column prop="birthday" label="出生日期" width="150"></el-table-column>
                    <el-table-column prop="inductionTime" label="入职时间" width="150"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="150"></el-table-column>
                    <el-table-column prop="job" label="工作" width="100"></el-table-column>
                    <el-table-column prop="salary" label="工资" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='3-1'"
                          :data="roomArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="roomNo" label="房间号" width="100"></el-table-column>
                    <el-table-column prop="url" label="图片" width="100"></el-table-column>
                    <el-table-column prop="introduce" label="介绍" width="150"></el-table-column>
                    <el-table-column prop="state" label="状态" width="150"></el-table-column>
                    <el-table-column prop="name" label="房间类型" width="150"></el-table-column>
                    <el-table-column prop="total" label="房间总数" width="100"></el-table-column>
                    <el-table-column prop="surplus" label="剩余数量" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-card v-if="currentIndex=='3-2'" class="box-card" style="width: 600px; height: 700px; margin: 0 auto;">
                    <div slot="header" class="clearfix" style="font-size:22px; text-align: center">
                        <span >房间信息</span>
                    </div>
                    <div class="text item" >
                        <el-form label-width="80px">
                            <el-form-item label="房间号">
                                <el-input type="text" v-model="room.roomNo"></el-input>
                            </el-form-item>
                            <el-form-item label="房间图片">
                                <el-upload
                                        action="/upload"
                                        name="pic"
                                        limit="1"
                                        list-type="picture-card"
                                        :on-success="handleSuccess"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="房间介绍">
                                <el-input type="text" v-model="room.introduce"></el-input>
                            </el-form-item>
                            <el-form-item label="房间类型">
                                <el-select v-model="room.typeId" >
                                    <el-option v-for="t in typeArr" :label="t.name" :value="t.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="房间价格">
                                <el-input type="text" v-model="room.cost"></el-input>
                            </el-form-item>
                            <el-form-item label="房间状态">
                                <el-input type="text" v-model="room.state"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="insert()">添加房间</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
                <el-table v-if="currentIndex=='4-1'"
                          :data="reserveArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="type" label="房间类型" width="100"></el-table-column>
                    <el-table-column prop="total" label="预定数量" width="100"></el-table-column>
                    <el-table-column prop="reserveTime" label="预定天数" width="150"></el-table-column>
                    <el-table-column prop="cast" label="费用" width="150"></el-table-column>
                    <el-table-column prop="created" label="预定时间" width="150"></el-table-column>
                    <el-table-column prop="username" label="客户姓名" width="100"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">接受</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">拒绝</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='4-2'"
                          :data="orderArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column type="orderNum" label="订单号" width="150"></el-table-column>
                    <el-table-column prop="type" label="房间类型" width="100"></el-table-column>
                    <el-table-column prop="total" label="预定数量" width="100"></el-table-column>
                    <el-table-column prop="reserveTime" label="预定天数" width="100"></el-table-column>
                    <el-table-column prop="cast" label="费用" width="100"></el-table-column>
                    <el-table-column prop="created" label="预定时间" width="200"></el-table-column>
                    <el-table-column prop="username" label="客户姓名" width="100"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="100"></el-table-column>
                    <el-table-column prop="adminname" label="处理人" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex=='4-3'"
                          :data="checkOutArr"
                          style="width: 100%">
                    <!--type=index 设置这一列显示的内容为编号-->
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column type="orderNum" label="订单号" width="150"></el-table-column>
                    <el-table-column prop="type" label="房间类型" width="100"></el-table-column>
                    <el-table-column prop="total" label="预定数量" width="100"></el-table-column>
                    <el-table-column prop="reserveTime" label="预定天数" width="100"></el-table-column>
                    <el-table-column prop="cast" label="费用" width="100"></el-table-column>
                    <el-table-column prop="created" label="预定时间" width="200"></el-table-column>
                    <el-table-column prop="username" label="客户姓名" width="100"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="100"></el-table-column>
                    <el-table-column prop="adminname" label="退房处理人" width="100"></el-table-column>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!--scope里面装着当前行所对应的对象信息
                        scope.$index 得到当前行对应的对象在数组中的下标
                        scope.row 得到当前行对应的对象
                        -->
                        <template slot-scope="scope">
                            <el-button size="mini" @click="bannerUpdate(scope.row)"
                                       type="success">修改</el-button>
                            <el-popconfirm
                                    title="确定删除此轮播图吗?"
                                    @confirm="bannerDelete(scope.$index, scope.row)"
                            >
                                <el-button slot="reference" size="mini"
                                           type="danger">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-card v-if="currentIndex=='5-1'" class="box-card" style="width: 600px; height: 700px; margin: 0 auto;">
                    <div slot="header" class="clearfix" style="font-size:22px; text-align: center">
                        <span >留言板</span>
                    </div>
                    <div class="text item"  >
                        <el-card v-for="m in messageBord" style="margin: 30px 10px">
                            <p>
                                <span style="margin-left: 10px">{{m.username}}</span>
                                <span style="margin-right: 10px; padding-left: 300px">{{m.created}}</span>
                            </p>
                            <p>
                                <span class="admin_info">{{m.content}}</span>
                            </p>
                            <el-divider content-position="right">
                                <el-divider direction="vertical"></el-divider>
                                <a href="javascript:void (0)"style="text-decoration: none; color: #333" @click="reply()">回复</a>
                                <el-divider direction="vertical"></el-divider>
                            </el-divider>

                        </el-card>
                    </div>
                </el-card>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                currentIndex:"5-1",
                adminInfo:{
                    name:"张山",
                    age:19,
                    job:"经理"
                },
                userArr:[
                    {id:1,username:"Alice",phone:18733333333,sex:"女",idCard:"3324343"}
                ],
                adminArr:[
                    {id:1,name:"张山",adminname:"小张",sex:"男",phone:"12313123333"}
                ],
                empArr:[],
                roomArr:[],
                room:{},
                typeArr:[],
                reserveArr:[],
                orderArr:[],
                checkOutArr:[],
                messageBord:[
                    {username:"Alice",content:"这酒店不错呀!",created:"2022-10-20 21:49:22"},
                    {username:"Bob",content:"绝对五星好评!!",created:"2022-10-21 10:49:22"},
                    {username:"Tom",content:"服务态度也好好呀!!",created:"2022-10-21 21:49:22"}
                ],
                user:{}
            }
        },
        methods:{
            logout(){
                if (confirm("您确定退出登录吗")){
                    //发请求退出登录
                    axios.get("/logout").then(function (response) {
                        location.href = "/";
                    })
                }
            },
            handleSelect(key,keyPath){
                if (key=='1-1'){
                    v.currentIndex = "1-1";
                }else if (key=='1-2'){
                    v.currentIndex = "1-2";
                }else if (key=='2-1'){
                    v.currentIndex = "2-1";
                }else if (key=='2-2'){
                    v.currentIndex = "2-2";
                }else if (key=='2-3'){
                    v.currentIndex = "2-3";
                }else if (key=='3-1'){
                    v.currentIndex = "3-1";
                }else if (key=='3-2'){
                    v.currentIndex = "3-2";
                }else if (key=='4-1'){
                    v.currentIndex = "4-1";
                }else if (key=='4-2'){
                    v.currentIndex = "4-2";
                }else if (key=='4-3'){
                    v.currentIndex = "4-3";
                }else if (key=='5-1'){
                    v.currentIndex = "5-1";
                }else if (key=='5-2'){
                    v.currentIndex = "5-2";
                }else if (key=='6-1'){
                    v.currentIndex = "6-1";
                }else if (key=='7-1'){
                    v.currentIndex = "7-1";
                }else{
                    v.currentIndex = key;
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                //发出删除图片请求
                axios.get("/remove?url="+v.p.url).then(function (response) {
                    v.$message("服务图片删除完成!");
                    v.p.url="";
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleSuccess(){

            }
        }
    })
</script>
</html>